<template>
  <view>
    <!-- 加载动画 -->
    <orange-fullloading
      text="加载中"
      :loadshow="loadingStatus">
    </orange-fullloading>

    <div class="my-canvas-box" :class="posterInfo.status?'show':'hide'">
      <canvas class="my-canvas" canvas-id="myCanvas" @longpress="saveSharePic"></canvas>
    </div>


    <!--商品轮播图-->
    <swiper :indicator-dots="true" autoplay :interval="3000" class="w-100" style="height: 750rpx;">
      <swiper-item class="w-100" style="height: 750rpx;" v-for="(item, index) in goodsInfo.img" :key="index">
        <image :src="item.img" mode="" class="w-100 h-100"></image>
      </swiper-item>
    </swiper>
    <!--商品信息-->
    <view class="w-100 bg-white ">
      <!--秒杀剩余时间-->
      <view v-if="pageInfo.pageStatus === 'seckill'&& pageInfo.productStatus == 1">
        剩余时间：{{seckillTime.hou}}:{{seckillTime.min}}:{{seckillTime.sec}}
      </view>

      <view class="row-ac-sb flex-1 ml-2 mr-2 pt-1">
        <!-- 秒杀产品价格开始 -->
        <view class="row-ac" v-if="pageInfo.pageStatus === 'seckill'">
          <view class="text-main-color font-s-6 font-w">
            <text class="font-s-3">￥</text>
            {{ goodsInfo.seckillPrice }}
          </view>
          <view class="ml-3 text-de font-s-3 text-light-grey">
            <text>￥</text>
            {{ goodsInfo.price }}
          </view>
        </view>
        <!-- 秒杀产品价格开始 -->
        <!-- 常规产品价格开始 -->
        <view class="row-ac" v-else>
          <view class="text-main-color font-s-6 font-w">
            <text class="font-s-3">￥</text>
            {{ goodsInfo.price }}
          </view>
          <view class="ml-3 text-de font-s-3 text-light-grey">
            <text>￥</text>
            {{ goodsInfo.marketPrice }}
          </view>
        </view>
        <!-- 常规产品价格结束 -->

        <view class="font-s-3 text-light-grey">{{ goodsInfo.soldCount }}人已经购买</view>
      </view>

      <view class="flex-1 ml-2 mr-2 pb-5 pt-1 font-s-5">{{ goodsInfo.title }}</view>
    </view>
    <!--规格选择-->
    <view class="w-100 bg-white mt-2 font-s-4">
      <view class="p-3 flex-1 border-bottom text-light-grey">
        保障
        <text class="ml-3 text-dark">厂家直供.官方正品.七天无忧退换</text>
      </view>
      <view class="p-3 flex-1 border-bottom text-light-grey">
        发货
        <text class="ml-3 text-dark">商城直营</text>
      </view>
      <view class="p-3 row-ac-sb flex-1 border-bottom text-light-grey" v-if="!singleSpecificationStatus"
            @click="toggle('bottom')">
        <view>
          已选
          <text class="ml-3 text-dark">{{ userChooseSkuText }}</text>
        </view>
        <view class="iconfont icon-sandian fon7"></view>
      </view>
     <!-- <view class="p-3 flex-1 border-bottom text-light-grey">
        分享
        <text class="ml-3 text-dark" @click="generatePoster">点击分享</text>
      </view>-->
    </view>
    <!--用户评价-->
    <view class="w-100 bg-white mt-2">
      <!-- <view class="row-ac-sb flex-1 border-bottom">
        <view class="p-2 font-w">
          用户评价
          <text class="text-light-grey font-s-3">(982)</text>
        </view>
        <view class="mr-2 text-light-grey font-s-3">
          <text class="text-main-color">98%</text>
          好评率
        </view>
      </view> -->
      <!-- <view class="pl-2 pr-2">
        <view class="row-ac pt-1 pb-1">
          <image :src="userImg" mode="" style="width: 60rpx;height: 60rpx;" class="rounded-50"></image>
          <view class="ml-1">我是李大逊</view>
        </view>
        <view class="flex-1 pt-2 font-s-4 text-light-grey font-s-4">超级喜欢，很满意的一次购物体验</view>
        <view class="d-f mt-2 pb-3 justify-end">
          <view class="font-s-4 text-light-grey">规格:粉红色 XXL</view>
          <view class="text-light-grey font-s-4 ml-2">4-29 11:45</view>
        </view>
      </view> -->
    </view>
    <view class="w-100 mt-2 flex-1 bg-white">
      <view class="row flex-1 pt-2 pb-2 text-light-grey font-s-5">图文详情</view>
      <view class="image-text">
        <rich-text :nodes="goodsInfo.description"></rich-text>
      </view>
    </view>
    <!-- 规格选择弹窗 -->
    <uni-popup id="popup" ref="popup" :type="type" :animation="false">
      <view class="popup-specifications w-100 bg-white">
        <view class="d-f pt-4">
          <image :src="specificationsImg" mode="" class="rounded ml-2" style="width: 120rpx;height: 120rpx;"></image>
          <view class="ml-2 flex-1 mr-2">
            <view class="">{{ goodsInfo.title }}</view>
            <view class="text-light-grey  font-s-3">
              已选:
              <text class="ml-2"></text>
              {{ userChooseSkuText }}
            </view>
          </view>
        </view>
        <view class="mt-1">
          <view class="ml-2 mt-5" v-for="(item, index) in goodsInfo.chooseGoodsSkuList" :key="item.id">
            <view class="font-s-6">{{ item.skuKey }}</view>
            <view class="row-ac-fw mt-2">
              <view
                class="mr-2 mb-2 bg-hover-light rounded font-s-4 text-muted"
                v-for="(itemLabel, index) in item.skuLabel"
                :key="itemLabel.id"
                :class="{ 'label-check': itemLabel.checked }"
                @tap="skuLabelClick(item, itemLabel, index)"
                style="padding: 10rpx 30rpx;">
                {{ itemLabel.name }}
              </view>
            </view>
          </view>
        </view>
        <!-- 秒杀选择规格弹窗下面的按钮 -->
        <view class="fixed-bottom w-100 row" style="height: 100rpx;z-index: 1099;"
              v-if="pageInfo.pageStatus === 'seckill'">
          <view v-if="pageInfo.productStatus == 2" class="row bg-color rounded" style="width: 230rpx; height: 80rpx;">
            尚未开始
          </view>
          <view v-else-if="pageInfo.productStatus == 0" class="row bg-color rounded"
                style="width: 230rpx; height: 80rpx;">已结束
          </view>
          <view v-else class="row bg-color rounded" style="width: 230rpx; height: 80rpx;" @tap="seckillBuyNow">立即购买
          </view>
        </view>
        <!-- 正常状态选择规格弹窗下面的按钮 -->
        <view class="fixed-bottom w-100 row" style="height: 100rpx;z-index: 1099;" v-else>
          <view class="row bg-color rounded mr-2" @tap="addToCat" style="width: 230rpx; height: 80rpx;">加入购物车</view>
          <view class="row bg-color rounded" style="width: 230rpx; height: 80rpx;" @tap="buyNow">立即购买</view>
        </view>
        <view style="padding-bottom: 350rpx;"></view>
      </view>
    </uni-popup>
    <uni-popup id="popupShare" ref="popupShare" type="share">
      <uni-popup-share title="分享到"></uni-popup-share>
    </uni-popup>
    <!-- 底部栏固定 -->
    <view class="w-100 bg-white fixed-bottom row-ac border-top" style="height: 120rpx;">
      <view class="row-ac ml-2" style="width: 43%;height: 120rpx;">
        <view class="flex-1 d-f">
          <navigator class="row-a-j-fc" url="/pages/index/index" open-type="switchTab">
            <view class="iconfont icon-shouye1 font-s-7"></view>
            <view class="font-s-2">首页</view>
          </navigator>
        </view>
        <view class=" flex-1 d-f">
          <view class="row-a-j-fc" @click="toService">
            <view class="iconfont icon-kefu font-s-7"></view>
            <view class="font-s-2">客服</view>
          </view>
        </view>
        <view class=" flex-1 d-f">
          <navigator class="row-a-j-fc" url="/pages/cart/cart" open-type="switchTab">
            <view class="iconfont icon-gouwuchekong font-s-7"></view>
            <view class="font-s-2">购物车</view>
          </navigator>
          <view class="rounded-50 bg-color row font-s-2"
                style="width: 35rpx;height: 35rpx;margin-left: -30rpx;margin-top: -0rpx;" v-if="shopCartNum > 0">{{
            shopCartNum }}
          </view>
        </view>
      </view>
      <!-- 秒杀底部立即购买按钮 -->
      <view class="row " style="width: 57%;height: 120rpx;" v-if="pageInfo.pageStatus === 'seckill'">
        <view v-if="pageInfo.productStatus == 2" class="row seckill-buy-now font-s-4">尚未开始</view>
        <view v-else-if="pageInfo.productStatus == 0" class="row seckill-buy-now font-s-4">已结束</view>
        <view v-else class="row seckill-buy-now font-s-4" @tap="seckillBuyNow">立即购买</view>
      </view>
      <!-- 正常商品底部立即购买按钮 -->
      <view class="row " style="width: 57%;height: 120rpx;" v-else>
        <view class="row bg-color add-to-cart font-s-4" @tap="addToCat">加入购物车</view>
        <view class="row bg-color buy-now font-s-4" @tap="buyNow">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
import { productDetail, getSeckillGoodsDetail, addToCartUrl, getCartListUrl, fileUploadUrl } from '@/api/index.js'
import uniPopup from '@/components/uni/uni-popup/uni-popup.vue'
import { formatRichText } from '@/utils/util'

export default {
  components: {
    uniPopup
  },
  data () {
    return {
      goodsInfo: {
        description: '', //商品详情图
        chooseGoodsSkuList: [], // 供用户选择的SKU列表
        goodsSkusList: [] // 商品有的规格列表
      },
      userChooseSku: {}, // 用户选择中的sku对象
      userCheckSku: {}, // 用户已经选中的sku
      userChooseSkuText: '', // 用户选择sku文字
      specificationsImg: '', //弹窗第一张图片
      userImg: '/static/img/headerphoto.jpeg', //评论用户头像
      prodcutId: '',
      type: 'top',
      // 购物车数量
      shopCartNum: '',
      // 单规格
      singleSpecificationStatus: false,
      loadingStatus: true,
      pageInfo: {
        pageStatus: '',
        productStatus: '',
        activeId: ''
      },
      seckillTime: {
        hou: 0,
        min: 0,
        sec: 0
      },
      posterInfo: {
        status: false,
        imgSrc: '',
        qrSrc: '',
        title: '',
        priceTxt: '',
        originalTxt: ''
      },
    }
  },
  onLoad (option) {
    this.initData(option)
  },

  onHide () {
    uni.removeStorageSync('person-card')
  },

  methods: {
    async initData (option) {
      this.prodcutId = option.productId
      this.pageInfo.pageStatus = option.pageStatus
      this.pageInfo.productStatus = option.productStatus
      this.pageInfo.activeId = option.activeId
      await this.getDetail(this.pageInfo)
      await this.getShopCart()
      // 异步延迟加载
      setTimeout(() => {
        this.loadingStatus = false
      }, 100)
    },
    getDetail (pageInfo) {
      let productDetailId = productDetail + this.prodcutId

      if (pageInfo.pageStatus === 'seckill') {
        let httpObj = {
          activityId: pageInfo.activeId,
          productId: this.prodcutId
        }
        this.$R.get(getSeckillGoodsDetail, httpObj).then(res => {
          this.goodsInfo = res.data
          this.goodsInfo.chooseGoodsSkuList = []
          this.specificationsImg = res.data.img[0].img //规格第一张图片
          this.goodsInfo.goodsSkusList = res.data.skus
          this.goodsInfo.description = formatRichText(res.data.description)

          // 获取当前时间
          let date1 = new Date()
          // 去掉时间戳的毫秒
          let nowTime = Number(String(date1.getTime()).substring(0, 10))
          console.log(nowTime)
          // 计算当前时间和秒杀活动的剩余时间
          let surplusTime = this.goodsInfo.endAt - nowTime
          if (surplusTime > 0) {
            this.seckillTime.hou = parseInt((surplusTime % (60 * 60 * 24)) / 3600) < 10 ? ('0' + parseInt((surplusTime % (60 * 60 * 24)) / 3600)) : parseInt((surplusTime % (60 * 60 * 24)) / 3600)
            this.seckillTime.min = parseInt(((surplusTime % (60 * 60 * 24)) % 3600) / 60) < 10 ? ('0' + parseInt(((surplusTime % (60 * 60 * 24)) % 3600) / 60)) : parseInt(((surplusTime % (60 * 60 * 24)) % 3600) / 60)
            this.seckillTime.sec = parseInt(((surplusTime % (60 * 60 * 24)) % 3600) % 60) < 10 ? ('0' + parseInt(((surplusTime % (60 * 60 * 24)) % 3600) % 60)) : parseInt(((surplusTime % (60 * 60 * 24)) % 3600) % 60)
          }
          let timer = setInterval(() => {
            --this.seckillTime.sec
            if (this.seckillTime.sec < 0) {
              this.seckillTime.sec = 59
              --this.seckillTime.min
              if (this.seckillTime.min < 0) {
                this.seckillTime.min = 59
                --this.seckillTime.hou
                if (this.seckillTime.hou < 0) {
                  // 如果秒杀结束，清除倒计时，返回上一页
                  clearInterval(timer)
                  this.pageInfo.productStatus = 0
                } else if (this.seckillTime.hou < 10) {
                  // 小于10在前面追加0
                  this.seckillTime.hou = '0' + this.seckillTime.hou
                }
              } else if (this.seckillTime.min < 10) {
                // 小于10在前面追加0
                this.seckillTime.min = '0' + this.seckillTime.min
              }
            } else if (this.seckillTime.sec < 10) {
              // 小于10在前面追加0
              this.seckillTime.sec = '0' + this.seckillTime.sec
            }
          }, 1000)

          if (res.data.attributeList.length == 0 && res.data.skus.length == 0) {
            // 如果是单规格
            this.singleSpecificationStatus = true
          } else {
            // 把后台返回的供选择的sku列表，从对象转化为数组的格式
            let goosSkuObj = res.data.attributeList
            // 自增一个数字，用来组合规格的id，因为微信小程序上面id不能相同
            let newSkuLabelId = 0
            for (let i in goosSkuObj) {
              ++newSkuLabelId
              let o = {
                id: newSkuLabelId,
                skuKey: '',
                skuLabel: []
              }
              o.skuKey = i
              let idNum = 1
              for (let j = 0; j < goosSkuObj[i].length; j++) {
                o.skuLabel.push({
                  id: newSkuLabelId + j,
                  checked: false,
                  name: goosSkuObj[i][j]
                })
              }
              // 把重新生成的商品sku列表添加到chooseGoodsSkuList里面
              this.goodsInfo.chooseGoodsSkuList.push(o)
              // 默认第一个是选中状态
              o.skuLabel[0].checked = true
              this.userChooseSkuText += o.skuLabel[0].name + '，'
              this.goodsInfo.chooseGoodsSkuList.forEach(item => {
                this.userChooseSku[item.skuKey] = item.skuLabel[0].name
              })
              this.userCheckSku = res.data.skus[0]
            }
          }
        })
      } else {
        // 常规获取商品详情
        this.$R.get(productDetailId).then(res => {
          this.goodsInfo = res.data
          this.goodsInfo.chooseGoodsSkuList = []
          this.specificationsImg = res.data.img[0].img //规格第一张图片
          this.goodsInfo.goodsSkusList = res.data.skus
          this.goodsInfo.description = formatRichText(res.data.description)
          if (res.data.attributeList.length == 0 && res.data.skus.length == 0) {
            // 如果是单规格
            this.singleSpecificationStatus = true
          } else {
            // 把后台返回的供选择的sku列表，从对象转化为数组的格式
            let goosSkuObj = res.data.attributeList
            // 自增一个数字，用来组合规格的id，因为微信小程序上面id不能相同
            let newSkuLabelId = 0
            for (let i in goosSkuObj) {
              ++newSkuLabelId
              let o = {
                id: newSkuLabelId,
                skuKey: '',
                skuLabel: []
              }
              o.skuKey = i
              let idNum = 1
              for (let j = 0; j < goosSkuObj[i].length; j++) {
                o.skuLabel.push({
                  id: newSkuLabelId + j,
                  checked: false,
                  name: goosSkuObj[i][j]
                })
              }
              // 把重新生成的商品sku列表添加到chooseGoodsSkuList里面
              this.goodsInfo.chooseGoodsSkuList.push(o)
              // 默认第一个是选中状态
              o.skuLabel[0].checked = true
              this.userChooseSkuText += o.skuLabel[0].name + '，'
              this.goodsInfo.chooseGoodsSkuList.forEach(item => {
                this.userChooseSku[item.skuKey] = item.skuLabel[0].name
              })
              this.userCheckSku = res.data.skus[0]
            }
          }
        })
      }
    },
    getShopCart () {
      // 如果token为空，直接返回
      if (uni.getStorageSync('token') == '') {
        return
      }
      this.$R.get(getCartListUrl).then(res => {
        this.shopCartNum = res.data.list.length
        this.$store.commit('shopCartNumChange', this.shopCartNum)
      })
    },
    //弹出规格选择
    // 选择商品规格
    skuLabelClick (item, itemLabel, index) {

      // 把点击的那一列checked重置为false
      for (let i = 0; i < item.skuLabel.length; i++) {
        item.skuLabel[i].checked = false
      }
      // 让点击的哪一个checked变为true
      item.skuLabel[index].checked = true
      this.userChooseSku[item.skuKey] = itemLabel.name
      for (let i = 0; i < this.goodsInfo.goodsSkusList.length; i++) {
        if (this.isObjectValueEqualNew(this.userChooseSku, this.goodsInfo.goodsSkusList[i].productSpecs)) {
          this.userCheckSku = this.goodsInfo.goodsSkusList[i]
        }
      }
      this.userChooseSkuText = Object.values(this.userChooseSku).toString()
    },
    // 判断对象键和值是否相等
    isObjectValueEqualNew (a, b) {
      // 判断两个对象是否指向同一内存，指向同一内存返回true
      if (a === b) return true
      // 获取两个对象键值数组
      let aProps = Object.getOwnPropertyNames(a)
      let bProps = Object.getOwnPropertyNames(b)
      // 判断两个对象键值数组长度是否一致，不一致返回false
      if (aProps.length !== bProps.length) return false
      // 遍历对象的键值
      for (let prop in a) {
        // 判断a的键值，在b中是否存在，不存在，返回false
        if (b.hasOwnProperty(prop)) {
          // 判断a的键值是否为对象，是则递归，不是对象直接判断键值是否相等，不相等返回false
          if (typeof a[prop] === 'object') {
            if (!this.isObjectValueEqualNew(a[prop], b[prop])) return false
          } else if (a[prop] !== b[prop]) {
            return false
          }
        } else {
          return false
        }
      }
      return true
    },
    // 立即购买
    async buyNow () {
      // 如果没有登录，跳转到登录页面
      if (uni.getStorageSync('token') == '') {
        uni.showToast({
          title: '请先登录，2秒后将跳转到登录页面',
          icon: 'none',
          duration: 3000
        })
        await setTimeout(() => {
          uni.navigateTo({
            url: '/pages/public/login'
          })
        }, 2000)
        return false
      }
      let httpObj = {}
      if (this.singleSpecificationStatus) {
        // 如果是单规格
        httpObj = {
          sku: [{
            amount: 1,
            productId: Number(this.prodcutId),
            skuId: 0
          }]
        }
      } else {
        // 多规格
        httpObj = {
          sku: [{
            amount: 1,
            productId: Number(this.prodcutId),
            skuId: this.userCheckSku.id
          }]
        }
      }
      httpObj = JSON.stringify(httpObj)
      uni.navigateTo({
        url: '/pages/order/establishorder?orderType=buyNow&goodsAttribute=' + httpObj
      })
    },
    // 秒杀立即购买
    async seckillBuyNow () {
      // 如果没有登录，跳转到登录页面
      if (uni.getStorageSync('token') == '') {
        uni.showToast({
          title: '请先登录，2秒后将跳转到登录页面',
          icon: 'none',
          duration: 3000
        })
        await setTimeout(() => {
          uni.navigateTo({
            url: '/pages/public/login'
          })
        }, 2000)
        return false
      }
      let httpObj = {}
      if (this.singleSpecificationStatus) {
        // 如果是单规格
        httpObj = {
          sku: [{
            amount: 1,
            productId: Number(this.prodcutId),
            skuId: 0
          }]
        }
      } else {
        // 多规格
        httpObj = {
          sku: [{
            amount: 1,
            productId: Number(this.prodcutId),
            skuId: this.userCheckSku.id
          }]
        }
      }
      httpObj = JSON.stringify(httpObj)
      uni.navigateTo({
        url: '/pages/order/establishorder?orderType=seckill&activeId=' + this.pageInfo.activeId + '&goodsAttribute=' + httpObj
      })
    },

    // 添加到购物车
    async addToCat () {
      // 如果没有登录，跳转到登录页面
      if (uni.getStorageSync('token') == '') {
        uni.showToast({
          title: '请先登录，2秒后将跳转到登录页面',
          icon: 'none',
          duration: 3000
        })
        await setTimeout(() => {
          uni.navigateTo({
            url: '/pages/public/login'
          })
        }, 2000)
        return false
      }

      if (!this.singleSpecificationStatus && JSON.stringify(this.userCheckSku) == '{}') {
        // 如果不是单规格，并且没有选中规格
        return uni.showToast({
          title: '请选择商品规格',
          icon: 'none',
          duration: 3000
        })
      }

      let httpObj = {}
      httpObj.productId = this.prodcutId
      httpObj.skuId = this.userCheckSku.id
      httpObj.amount = 1
      // 添加到购物车
      await this.$R.post(addToCartUrl, httpObj).then(res => {
        uni.showToast({
          title: '添加购物车成功'
        })
        this.$refs.popup.close()
      })
      this.getShopCart()
    },
    toService () {
      uni.showToast({
        title: '未安装客服插件',
        icon: 'none'
      })
    },
    toggle (type) {
      this.type = type
      this.$refs.popup.open()
    },
    //点击右上角分享事件
    onNavigationBarButtonTap () {
      this.$refs.popupShare.open()
    },
    navTo (url) {
      uni.navigateTo({
        url
      })
    },
    // 生成海报
    async generatePoster () {
      // 如果没有登录，跳转到登录页面
      if (uni.getStorageSync('token') == '') {
        uni.showToast({
          title: '请先登录，2秒后将跳转到登录页面',
          icon: 'none',
          duration: 3000
        })
        await setTimeout(() => {
          uni.navigateTo({
            url: '/pages/public/login'
          })
        }, 2000)
        return false
      }
      let context = uni.createCanvasContext('myCanvas')
      let userInfo = uni.getStorageSync('userInfo')
      this.posterInfo.status = true
      // 绘制头像
      await uni.downloadFile({
        url: userInfo.image,
        success: function(res) {
          res.tempFilePath.crossOrigin = 'Anonymous'; // 支持跨域图片
          context.drawImage(res.tempFilePath, 20, 20, 50, 50)
          context.draw(true)
        }
      })
      // 绘制用户昵称
      context.setFontSize(14)
      context.fillText(userInfo.name, 90, 35)
      context.fillText('的爱心分享', 90, 60)
      context.draw(true)
      // 绘制价格
      context.setFontSize(18)
      context.fillText(`￥${this.goodsInfo.price}`, 20, 310)
      context.draw(true)
      // 绘制商品名称
      this.drawText(this.goodsInfo.title, 20, 315, context)

      // 绘制商品详情
      await uni.downloadFile({
        url: this.specificationsImg,
        success: function(res) {
          res.tempFilePath.crossOrigin = 'Anonymous'; // 支持跨域图片
          context.drawImage(res.tempFilePath, 20, 80, 250, 200)
          context.draw(true)
        }
      })
    },
    // canvas文字换行
    drawText (context, x, y, canvas) {
      let strArr = []
      let n = 9
      for (let i = 0, l = context.length; i < l / n; i++) {
        let a = context.slice(n * i, n * (i + 1))
        strArr.push(a)
      }
      strArr.forEach(item => {
        y += 20
        canvas.setFontSize(14)
        canvas.fillText(item, x, y)
        canvas.draw(true)
      })
    },
    // 保存生成的海报
    saveSharePic () {
      let that = this
      let url = this.$R.baseUrl()
      let canvasImg = ''
      uni.showModal({
        title: '提示',
        content: '确定要保存分享海报吗？',
        success: function(res) {
          if (res.confirm) {
            // canvas生成图片
            uni.canvasToTempFilePath({
              x: 0,
              y: 0,
              width: 1200,
              height: 1800,
              destWidth: 600,
              destHeight: 900,
              fileType:'jpg',
              canvasId: 'myCanvas',
              success: function(res) {
                // 保存带哦本地
                uni.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success: function () {
                    uni.showToast({
                      title: '保存海报成功',
                      icon: 'none',
                      duration: 3000
                    })
                  }
                });

                /*uni.uploadFile({
                  url: url + fileUploadUrl, //仅为示例，非真实的接口地址
                  filePath: res.tempFilePath,
                  name: 'file',
                  formData: {},
                  // 请求头一定要加，否则 iOS 图片上传会失败
                  header: {
                    'content-type': 'multipart/form-data'
                  },
                  success: async (uploadFileRes) => {
                    let result = JSON.parse(uploadFileRes.data)
                    console.log(result)

                    /!*if(result.code !== 200){
                      console.log(result)
                      uni.showToast({
                        title: result.msg,
                        icon: 'none'
                      });
                    }
                    else {
                      let filePath = result.data

                    }*!/
                  }
                })*/
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
  page {
    background-color: $uni-bg-color-grey;
  }

  .my-canvas-box {
    width: 750rpx;
    height: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, .6);
    z-index: 99;

    &.hide {
      display: none;
    }

    &.show {
      display: block;
    }

    .my-canvas {
      width: 600rpx;
      height: 900rpx;
      background-color: #ffffff;
      margin-left: 75rpx;
      margin-top: 100rpx;
    }
  }


  .detail-desc {
  }

  .image-text {
    img {
      width: 100%;
    }
  }

  .add-to-cart {
    width: 180rpx;
    height: 70rpx;
    border-radius: 35rpx 0 0 35rpx;
    margin-right: 1rpx;
  }

  .seckill-buy-now {
    width: 248rpx;
    height: 80rpx;
    border-radius: 40rpx;
    background: linear-gradient(to right, #f61f1b, #EC684A);
    color: #FFFFFF;
  }

  .buy-now {
    width: 180rpx;
    height: 70rpx;
    border-radius: 0 35rpx 35rpx 0;
  }

  .popup-specifications {
  }

  .label-check {
    background: $bg-main-color;
    color: #FFFFFF;
  }
</style>
